<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <el-card>
        <label class="text-14px text-#172b4d">场景名称</label>

        <el-row :gutter="20" class="mb-20px mt-12px items-center">
          <el-col :span="18">
            <span>{{ form.sceneName }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="18">
            <label class="text-14px text-#172b4d">场景标签</label>

            <div class="mt-12px" v-if="form.list">
              <el-row
                v-for="item in form.list"
                :key="item.id"
                class="w-full items-center"
                :gutter="20"
              >
                <el-col :span="20">
                  <div class="mr-50px w-full text-14px">{{ item.label }}</div>
                </el-col>
                <el-col :span="2">
                  <el-button
                    v-hasPermi="['service:step-config:update']"
                    text
                    @click="openForm('edit', item.id)"
                    >查看</el-button
                  >
                </el-col>
                <el-col :span="2">
                  <el-button
                    v-hasPermi="['service:step-config:delete']"
                    text
                    type="danger"
                    @click="handleDel(item.id)"
                    >删除</el-button
                  >
                </el-col>
              </el-row>
            </div>

            <el-row class="mt-6px">
              <el-button
                v-hasPermi="['service:step-config:create']"
                @click="openForm('create')"
                type="primary"
                >增加一条</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card>
        <div class="realTime position-relative">
          <el-row>
            <label class="avatar"></label>
            <div class="echo">
              {{ form.content }}
              <!-- <div class="mt-12px" v-if=" form.list.length > 0">
                <el-row v-for="(item,index) in form.list" :key="item.time" class="mb-6px w-full items-center" :gutter="20">
                  <el-col :span="20">
                    <div class="mr-50px w-full text-#72a0eb"><label>{{index+1}}. </label>{{item.name}}</div>
                  </el-col>
                </el-row>
              </div> -->
            </div>
          </el-row>
          <!-- <div v-if="currentTag">{{currentTag.name}}</div> -->
          <div
            :class="[
              'tags',
              'position-absolute',
              'pos-bottom-60px',
              { rows: form.list.length > 4 }
            ]"
            v-if="form.list"
          >
            <el-tag
              :style="{ marginRight: index != form.list.length - 1 ? '2px' : '0px' }"
              v-for="(tag, index) in form.list"
              :key="tag.id"
              class="cursor-pointer"
              @click="handleClickTag(tag)"
              >{{ tag.label }}</el-tag
            >
          </div>
          <div
            class="position-absolute pos-bottom-20px flex items-center flex-justify-between"
            style="width: calc(100% - 40px)"
          >
            <el-input v-model="inputValue" style="width: 75%" />
            <el-button class="ml-10px flex-1" type="primary" size="small">按钮</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <!-- 表单弹窗：添加/修改 -->
  <StepForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import * as SceneApi from '@/api/service/scene/index'
import StepForm from './Form.vue'
defineOptions({ name: 'ServiceWelcomeMsgConfig' })
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const form = reactive({
  sceneName: undefined,
  sceneId: undefined,
  list: undefined
})

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number, sceneId: numder) => {
  formRef.value.open(type, id, form.sceneId)
}

/** 删除按钮操作 */
const handleDel = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await SceneApi.deleteSceneStep(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

// 获取场景下步骤
const getList = async () => {
  try {
    const data = await SceneApi.getSceneStepPage(form.sceneId)
    form.list = data
  } finally {
  }
}

/** 提交步骤 */
const handleSavePlan = async () => {
  try {
    const data = JSON.parse(JSON.stringify(form))
    data.list = JSON.stringify(data.list)
    if (form.id) {
      await SceneApi.createStep(data)
      message.success(t('common.updateSuccess'))
    } else {
      await SceneApi.updateStep(data)
      message.success(t('common.createSuccess'))
    }
    goBack()
  } finally {
  }
}

/** 初始化 */
const route = useRoute()
onMounted(() => {
  form.sceneName = route.query.name
  form.sceneId = route.query.id
  getList(route.query.id)
})
/** 取消按钮 */
const router = useRouter()
const goBack = () => {
  router.push({
    path: '/service/service-system-config',
    query: {
      keys: Math.ceil(Math.random() * 100)
    }
  })
}

const currentTag = ref()
const handleClickTag = ({ time }) => {
  currentTag.value = form.list.find((i) => i.time == time)
}
</script>
<style lang="scss" scoped>
.realTime {
  width: 50%;
  min-height: 500px;
  border: 2px solid #f0f0f0;
  border-radius: 20px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
  .avatar {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #268;
  }
  .echo {
    margin: 0;
    margin-left: 10px;
    border: 1px solid #f0f0f0;
    padding: 10px;
    font-size: 14px;
    line-height: 20px;
    width: calc(100% - 52px - 10px);
    color: var(--el-text-color-regular);
  }
  .tags {
    width: calc(100% - 40px);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 2px;
  }
  .rows {
    grid-template-rows: repeat(2, 1fr);
  }
}
</style>
